iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
Modern Web

【每天5分鐘】學前端系列 第 16

Day16【每天5分鐘】學前端 | JavaScript 布林值 boolean + 邏輯運算子

  • 分享至 

  • xImage
  •  

布林值 Boolean

不用引號包起來, 直接寫 即可

布林值只有兩個:
truefalse


邏輯運算子

以下引用自 MDN

邏輯運算子 通常被用於 布林(邏輯)值
使用於布林(邏輯)值時,它們會回傳 布林型態 的值。
然而,&& 和 || 運算子實際上是回傳兩指定運算元之一,
因此用於非布林型態值時,它可能會回傳一個非布林型態的值。

二元邏輯運算子 邏輯 格式
&& AND(和) 運算式1 && 運算式2
|| OR(或) 運算式1 || 運算式2

邏輯 AND (&&)

運算式1 和 運算式2 兩邊皆為 true 時,結果才是 true。
當運算式1 為 false 時,結果一定是 false,不會去判斷運算式2。

運算式1 && 運算式2 結果 說明
true && true true 運算式1 為 true,接著判斷運算式2 也為 true,兩者皆為 true 結果為 true
true && false false 運算式1 為 true,接著判斷運算式2 為 false,兩者不相等 結果為 false
false && true false 運算式1 為 false,不判斷運算式2,結果為 false
false && false false 運算式1 為 false,不判斷運算式2,結果為 false

AND (&&)就像是一個 嚴格 的教授,全部答對才讓你過關,
有一題答錯就讓你死當重修~~~ /images/emoticon/emoticon02.gif


邏輯 OR (||)

運算式1 和 運算式2 兩邊有一個為 true 時,結果就是 true。

運算式1 || 運算式2 結果 說明
true || true true 運算式1 為 true,結果為 true
true || false true 運算式1 為 true,結果為 true
false || true true 運算式1 為 false,接著判斷運算式2 為 true,結果為 true
false || false false 運算式1 為 false,接著判斷運算式2 為 false,兩者皆為 false 結果為 false

OR (||)則是標準 寬鬆 的教授,
只要有一題答對,就讓你過關啦~~~ /images/emoticon/emoticon07.gif

你想到哪一位 AND 教授 或 OR 教授 了呢?


邏輯 NOT (!)

一元邏輯運算子 邏輯 格式
! NOT(相反) !運算式

! 是將原本為 true 的轉換為 false,原本為 false 的轉換為 true。

!運算式 結果 說明
!true false true 的相反是 false
!false true false 的相反是 true
!0 true (0 視為 false)
!1 (或其他非零的數值) false (非 0 的數值皆視為 true)
!"字串" false (字串視為 true)

可以打開 開發者工具的 主控台 ,輸入 console.log ( ); 玩玩看喔!


補充

可以被轉換為 false 的有:

  • false
  • 0
  • 空字串
  • null
  • NaN
  • undefined (未定義)
  • !true

另外,
boolean 在中國又被稱做 布爾值 ,找資料時也許會遇到,一併補充。


https://ithelp.ithome.com.tw/upload/images/20220917/20151346jTq1KcLef0.png 延伸閱讀:

https://ithelp.ithome.com.tw/upload/images/20220917/20151346jTq1KcLef0.png 自學指引:

  • typeof
  • 何謂 NaN ?
  • 何謂 null?
  • 何謂 undefined ?


感謝閱讀,我們明天見囉~~~ /images/emoticon/emoticon29.gif


上一篇
Day15【每天5分鐘】學前端 | JavaScript 數字 number
下一篇
Day17【每天5分鐘】學前端 | JavaScript 比較運算子
系列文
【每天5分鐘】學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
overcast3579
iT邦新手 5 級 ‧ 2022-09-17 23:44:13

趕上末班車!

Olivia iT邦新手 4 級 ‧ 2022-09-18 00:08:32 檢舉

壓線的時光~笑

我要留言

立即登入留言